<template>
	<view class="main">
		<u-navbar :is-back="false" title="凯通利众物业" :background="background" title-size="32" title-color="#000"  :border-bottom="false" ></u-navbar>
		<view class="user" v-if="usertype==2">
			<u-swiper :list="bannerlist" height="300"></u-swiper>
			<view class="content">
				<view class="img" @click="router('../../paymoney/paymoney')">
					<image src="../../../static/images/wyf.png" mode=""></image>
					<view class="txt">
						<view class="tit">
							物业费缴纳
						</view>
						<text>一键缴纳物业费用</text>
					</view>
				</view>
				<view class="img" @click="router('../../repair/repair')">
					<image src="../../../static/images/bx.png" mode=""></image>
					<view class="txt2">
						<view class="tit">
							物业报修
						</view>
						<text>维修人员上门维修</text>
					</view>
				</view>
			</view>
			<view class="kong">
				<image src="../../../static/images/kong.png" mode=""></image>
			</view>
		</view>
		<view class="all" v-if="usertype==3">
			<view class="tabs">
				<view class="clicks" @click="change(1)">
					<text :class="inde==1?'checked':'check'">新报修</text>
					<view class="bot" v-if="inde==1"></view>
				</view>
				<view class="xian"></view>
				<view class="clicks" @click="change(2)">
					<text :class="inde==2?'checked':'check'">已处理报修</text>
					<view class="bot" v-if="inde==2"></view>
				</view>
			</view>

			<view class="new" v-if="inde==1">
				<view class="contents" v-for="(item,index) in repairlist" :key="index"
					@click="router('../../undone/undone',item)">
					<view class="time">
						<text>{{item.createTime}}</text>
						<image src="../../../static/images/right.png" mode=""></image>
					</view>
					<text v-if="item.repairCategory=='01'">报修类目：水</text>
					<text v-if="item.repairCategory=='02'">报修类目：电</text>
					<text v-if="item.repairCategory=='03'">报修类目：门</text>
				</view>
			</view>
			<view class="new" v-if="inde==2">
				<view class="contents" v-for="(item,index) in repairlist" :key="index"
					@click="router('../../finish/finish',item)">
					<view class="time">
						<text>{{item.createTime}}</text>
						<image src="../../../static/images/right.png" mode=""></image>
					</view>
					<view class="finish">
						<text v-if="item.repairCategory=='01'">报修类目：水</text>
						<text v-if="item.repairCategory=='02'">报修类目：电</text>
						<text v-if="item.repairCategory=='03'">报修类目：门</text>
						<view>已处理</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				txtstyle: {
					color: '#151515',
				},
				inde: 1,
				bannerlist: [{
					image: '',
				}],
				repairlist: [],
				status: '01',
				type: [],
				usertype: '',
			}
		},
		onShow() {
		},
		onLoad(options) {
			this.getrepairlist()
			this.getrepair()
			this.getbanner()
			this.getinfo()
		},
		methods: {
		
			change(index) {
				this.inde = index
				if (index == 1) {
					this.status = this.type[0].dictValue
					this.getrepairlist()
				} else if (index == 2) {
					this.status = this.type[1].dictValue
					this.getrepairlist()
				}
			},
			//跳转到指定网页
			router(path, details) {
				uni.navigateTo({
					url: path,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('details', details)
					}
				})
			},
			//获取报修信息
			getrepair() {
				global.$http.request({
					url: '/system/dict/data/type/' + 'maintenance_status',
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {

					}
				}).then(res => {
					console.log('维修状态', res.data);
					if (res.data.code == 200) {
						this.status = res.data.data[0].dictValue
						this.type = res.data.data
				
					}
				})
			},
			//获取报修信息
			getrepairlist() {
				global.$http.request({
					url: '/business/repair/listByLoginPerson',
					method: 'POST',
					data: {
						repairStatus: this.status
					},
					header: {
						'Authorization': uni.getStorageSync('token'), //自定义请求头信息
					},
				}).then(res => {
					console.log(res);
					this.repairlist = res.data.data
					console.log(this.repairlist);
				})
			},




			//获取轮播图
			getbanner() {
				global.$http.request({
					url: '/business/rotation/list',
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {
						pageNum: 1,
						pageSize: 10,
					}
				}).then(res => {
					if (res.data.code == 200) {
						var that = this
						that.bannerlist = res.data.rows
						for (let i = 0; i < that.bannerlist.length; i++) {
							that.bannerlist[i].image = res.data.rows[i].imageUrl
						}
					}
				})
			},






			//获取个人信息

			getinfo() {
				global.$http.request({
					url: '/getInfo',
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					console.log('信息', res);

					if (res.data.code == 200) {
						console.log('信息', res.data.user);
						this.usertype = Number(res.data.user.userType)
					}
				})
			},



		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
		height: 100%;
		font-family: Source Han Sans CN;
		background-color: #F7F7F7;

		.main {
			width: 750rpx;

			.user {
				// display: flex;
				// flex-direction: column;
				// align-items: center;

				.content {

					display: flex;
					justify-content: space-between;
					margin: 13rpx;

					.img {
						position: relative;

						image {
							width: 361rpx;
							height: 214rpx;
						}

						.txt {
							position: absolute;
							top: 60rpx;
							right: 40rpx;

							view {
								font-size: 36rpx;
								font-weight: bold;
								color: #00497D;
							}

							text {
								font-size: 22rpx;
								font-weight: 400;
								color: #284B64;
							}
						}

						.txt2 {
							position: absolute;
							top: 60rpx;
							right: 40rpx;

							view {
								font-size: 36rpx;
								font-weight: bold;
								color: #7D4900;
							}

							text {
								font-size: 22rpx;
								font-weight: 400;
								color: #765C37;
							}
						}
					}
				}

				.kong {
					width: 309rpx;
					margin: 150rpx auto;

					image {
						width: 309rpx;
						height: 265rpx;
					}
				}
			}



			.all {
				width: 750rpx;

				.tabs {
					margin-top: 1rpx;
					background-color: #fff;
					display: flex;
					justify-content: space-around;
					align-items: center;

					height: 88rpx;
					line-height: 88rpx;

					.clicks {
						width: 325rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;

						.check {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #010101;
						}

						.checked {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #074D93;
						}

						.bot {
							position: absolute;
							bottom: 0;
							width: 40rpx;
							height: 4rpx;
							background: #074D93;
						}
					}

					.xian {
						height: 25rpx;
						width: 2rpx;
						background-color: #dedede;
					}
				}

				.new {
					.contents {
						background-color: #fff;
						padding: 30rpx 36rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #074D93;
						margin-bottom: 2rpx;

						.time {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
							padding-bottom: 27rpx;

							image {
								width: 8rpx;
								height: 14rpx;
							}
						}

						.finish {
							display: flex;
							justify-content: space-between;
							align-items: center;

							view {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #FF0000;
							}
						}
					}
				}
			}

		}
	}
</style>
